<script setup lang="ts">

</script>

<template>
    <div><h1>这是首页</h1>
 <table class="table table-bordered">
    <tbody>
        <tr>
            <td>ID</td>
            <td>名字</td>
            <td>年龄</td>
            <td>婚否</td>
            <td>操作</td>
        </tr>
        <tr align="center" v-for="item in arrObj" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{item.name}}</td>
            <td>{{ item.age }}</td>
            <td>{{ item.marry }}</td>
            <td>
                <input type="button" value="修改">
                <input type="button" value="删除">
            </td>
        </tr>
        <tr>
            <td align="right">账号</td>
            <td><input type="text" v-model="name"></td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td><input type="password" v-model="pwd"></td>
        </tr>
        <tr>
            <td align="right"></td>
            <td><input type="button" value="登录" @click="login"></td>
        </tr>
    </tbody>
 </table>
    <select>
        <option value="">请选择</option>
        <option v-bind:value="item.id" v-for="item in city" :key="item.id">{{item.name}}</option>
    </select>
</div>
 
</template>
<script setup lang="ts">
import { ref,reactive } from 'vue'

let arrObj = reactive([
{id:1,name:'张三',age:18,marry:false},
{id:2,name:'张四',age:19,marry:false},
{id:3,name:'张五',age:20,marry:true},
{id:4,name:'张六',age:30,marry:false}

])

let city = reactive([
    {id:1,name:'河南'},
    {id:2,name:'河北'},
    {id:3,name:'山东'},
    {id:4,name:'山西'}

])

let name=ref("");
let pwd=ref("")

const login=()=>{
alert(name.value+","+pwd.value)
}

</script>


